<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常见事件</title>
		<style type="text/css">
			#e02{
				border: 1px solid #000000;
	  			height: 200px;
	 			width: 200px;
			}
			
		</style>
		<script src="../js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#e01").blur(function(){
					$("#textMsg").html("文本框失去焦点：blur");
				}).focus(function(){
					$("#textMsg").html("文本框获得焦点：focus");
				}).keydown(function(){
					$("#textMsg").append("键盘按下：keydown");
				}).keypress(function(event){
					$("#textMsg").append("键盘按：keypress");
				}).keyup(function(){
					$("#textMsg").append("键盘弹起：keyup");
				});
				
				var i = 0;
				$("#e02").mouseover(function(){
					$("#divMsg").html("鼠标移上：mouseover");
				}).mousemove(function(){
					//$("#divMsg").html("鼠标移动：mousemove , " + i++ );
				}).mouseout(function(){
					$("#divMsg").html("鼠标移出：mouseout");
				}).mousedown(function(){
					$("#divMsg").html("鼠标按下：mousedown");
				}).mouseup(function(){
					$("#divMsg").html("鼠标弹起：mouseup");
				});
				
				$("#e03").click(function(){
					$("#buttonMsg").html("单击：click");
				}).dblclick(function(){
					$("#buttonMsg").html("双击：dblclick");
				});
				
			});
			
			
			
			
			
		</script>
		
	</head>
	<body>
		<input id="e01" type="text" /><span id="textMsg"></span> <br/>
		<hr/>
		<div id="e02" ></div><span id="divMsg"></span> <br/>
		<hr/>
		<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
	</body>
</html>